<template>
	<!-- #ifdef MP-WEIXIN  -->
	<view class="force-login-wrap" v-if="forceOauth || showLogin">
		<image class="logo-bg" :src="$IMG_URL + '/logo_bg.png'" mode="aspectFill"></image>
		<view class="force-login__content y-f">
			<button class="choose-avatar" open-type="chooseAvatar" @chooseavatar="changeavatar">
				<image v-if="userData.avatarurl" class="user-avatar" :src="userData.avatarurl" mode=""></image>
				<open-data v-else class="user-avatar" type="userAvatarUrl"></open-data>
			</button>
			<input type="nickname" id="nickname-input" v-model="userData.nickname" class="list-val nick-name" confirm-type="done"
									@confirm="inputchange" @blur="getname" />
			<!-- <open-data class="user-avatar" type="userAvatarUrl"></open-data>
			<open-data class="user-name" type="userNickName"></open-data> -->
			<view class="login-notice">为了提供更优质的服务，需要获取您的手机号</view>
			<!-- <button class="cu-btn author-btn" @tap="getuserinfo">授权并查看</button> -->
			<button class="cu-btn author-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权并查看</button>
			<button class="cu-btn close-btn" @tap="closeAuth">暂不授权</button>
		</view>
	</view>
	<!-- #endif  -->
</template>

<script>
/**
 * 登录提示页
 * @property {Boolean} value=showLoginTip - 由v-model控制显示隐藏。
 * @property {Boolean} forceOauth - 小程序端特制的全屏登录提示。
 */
import Wechat from '@/common/wechat';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			screenShot: uni.getStorageSync('screenShot'),
			userData: {
				nickname: '微信用户'
			}
		};
	},
	props: {
		value: {},
		modalType: {
			type: String,
			default: ''
		}
	},
	computed: {
		...mapState({
			showLoginTip: state => state.user.showLoginTip,
			forceOauth: state => state.user.forceOauth
		}),
		showLogin: {
			get() {
				return this.showLoginTip;
			},
			set(val) {
				val ? uni.hideTabBar() : uni.showTabBar();
				this.$store.commit('LOGIN_TIP', val);
			}
		}
	},
	methods: {
		...mapActions(['setTokenAndBack']),
		
		changeavatar(e) {
			this.userData.avatar = e.detail.avatarUrl
			this.$tools.uploadImage('/api/common/upload', e.detail.avatarUrl).then(res => {
				this.userData.avatarurl =  res.fullurl;
			});
		},
		
		inputchange(e) {
			console.log(e);
			this.userData.nickname = e.detail.value
		},
		getname(e) {
			let data = e
			this.userData.nickname = data.detail.value
		},

		// 隐藏登录弹窗
		hideModal() {
			this.showLogin = false;
		},

		// 去登录
		onLogin() {
			this.showLogin = false;
			uni.setStorageSync('fromLogin', this.$Route);
			this.$Router.push({
				path: '/pages/public/login'
			});
		},
		
		async decryptPhoneNumber(e) {
			const info = e.detail
			if (e.detail.errMsg != "getPhoneNumber:fail user deny") {
				const data = {
					encryptedData: info.encryptedData,
					iv: info.iv,
					signature: info.signature,
					avatarurl: this.userData.avatarurl,
					nickname: this.userData.nickname
				}
				let token = await Wechat.wxMiniProgramOauthPhone(data);
				this.$store.commit('FORCE_OAUTH', false);
				this.$store.commit('LOGIN_TIP', false);
				uni.setStorageSync('fromLogin', this.$Route);
				this.setTokenAndBack(token);
			}
			
		},

		// 小程序，获取用户信息登录
		async getuserinfo() {
            let token = await Wechat.wxMiniProgramOauth();
            this.$store.commit('FORCE_OAUTH', false);
            this.$store.commit('LOGIN_TIP', false);
            uni.setStorageSync('fromLogin', this.$Route);
            this.setTokenAndBack(token);
        },

		// 小程序，取消登录
		closeAuth() {
			this.$store.commit('FORCE_OAUTH', false);
			this.$store.commit('LOGIN_TIP', false);
		}
	}
};
</script>

<style lang="scss">
// 登录提示
.modal-box {
	width: 610rpx;
	border-radius: 20rpx;
	background: #fff;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding-bottom: 30rpx;

	.head-bg {
		width: 100%;
		height: 210rpx;
	}

	.detail {
		.title1 {
			color: #46351b;
			font-size: 35rpx;
			font-weight: bold;
		}

		.title2 {
			font-size: 28rpx;
			color: #999;
			padding-top: 20rpx;
		}
	}

	.btn-box {
		margin-top: 80rpx;

		.login-btn {
			width: 492rpx;
			height: 70rpx;
			background: linear-gradient(-146deg, #ff995d, #ff6361);
			color: #fff;
			border-radius: 35rpx;
			font-size: 28rpx;
		}

		.close-btn {
			width: 492rpx;
			height: 70rpx;
			color: #999;
			font-size: 26rpx;
			margin-top: 20rpx;
			background: none;
		}
	}
}

// 小程序登录提醒
/* #ifdef MP-WEIXIN */
.force-login-wrap {
	position: fixed;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 11111;
	top: 0;
	background: linear-gradient(0deg, #ffffff 0%, #ff995d 81%, #ff6361 100%);
	.logo-bg {
		width: 640rpx;
		height: 300rpx;
	}
	.force-login__content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.choose-avatar {
			background: none;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			padding: 0;
			
			&::after {
				border: none;
			}
		}
		.nick-name {
			text-align: center;
			font-weight: 800;
			margin-top: 20rpx;
		}
		.user-avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 40rpx;
		}
		.user-name {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
		}
		.login-notice {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ff6361;
			line-height: 44rpx;
			width: 400rpx;
			text-align: center;
			margin-bottom: 80rpx;
		}
		.author-btn {
			width: 630rpx;
			height: 80rpx;
			background: linear-gradient(-146deg, #ff995d, #ff6361);
			color: #fff;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.close-btn {
			width: 630rpx;
			height: 80rpx;
			margin-top: 30rpx;
			border-radius: 40rpx;
			border: 2rpx solid #ff6361;
			background: none;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff6361;
		}
	}
}
/* #endif */
</style>
